<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <meta http-equiv=X-UA-Compatible content="IE=edge">
    <meta name=format-detection content="telephone=no">
    <meta name=format-detection content="email=no">
    <meta name=apple-mobile-web-app-capable content=yes>
    <meta name=apple-mobile-web-app-status-bar-style content=black>
    <meta name=full-screen content=yes>
    <meta name=browsermode content=application>
    <meta name=x5-orientation content=portrait>
    <meta name=x5-fullscreen content=true>
    <meta name=x5-page-mode content=app>

    <title>Title</title>
    <script src="/common/vue.min.js"></script>
    <link rel="stylesheet" href="/wap/stock/index.css">
</head>
<body>
<div id="consult">
    <header class="header clear" v-if="contents">
        <div class="clear headTop">
            <div class="leftTop">
                <p class="leftTop-first">{{contents.last_px}}</p>
                <p class="leftTop-two">
                    <span v-if="contents.px_change < 0">{{contents.px_change | toFixed}}</span>
                    <span v-else class="active">+{{contents.px_change | toFixed}}</span>
                    <span v-if="contents.px_change_rate < 0">{{contents.px_change_rate | toFixed}}</span>
                    <span v-else class="active">+{{contents.px_change_rate | toFixed}}</span>
                </p>
                <p class="leftTop-last">
                    交易中 <span>{{contents.update_time | data}}</span>
                </p>
            </div>
            <ul class="rightTop clear">
                <li>
                    <p class="headTitle">今开</p>
                    <span class="headText">{{contents.open_px | toFixed}}</span>
                </li>
                <li>
                    <p class="headTitle">成交量</p>
                    <span class="headText">{{contents.business_amount | sizeShift}}</span>
                </li>
                <li>
                    <p class="headTitle">昨收</p>
                    <span class="headText">{{contents.preclose_px | toFixed}}</span>
                </li>
                <li>
                    <p class="headTitle">换手率</p>
                    <span class="headText">{{contents.turnover_ratio | percent}}</span>
                </li>
            </ul>
        </div>
        <div class="clear headFot">
            <ul class="leftBom clear">
                <li>
                    <p class="headTitle">最高</p>
                    <span class="headText">{{contents.high_px | toFixed}}</span>
                </li>
                <li>
                    <p class="headTitle">最低</p>
                    <span class="headText">{{contents.low_px | toFixed}}</span>
                </li>
                <li>
                    <p class="headTitle">市盈率</p>
                    <span class="headText">{{contents.pe_rate | toFixed}}</span>
                </li>
                <li>
                    <p class="headTitle">振幅</p>
                    <span class="headText">{{contents.amplitude | percent}}</span>
                </li>
            </ul>
            <ul class="rightBom clear">
                <li>
                    <p class="headTitle">内盘</p>
                    <span class="headText">{{contents.business_amount_in | sizeShift}}</span>
                </li>
                <li>
                    <p class="headTitle">外盘</p>
                    <span class="headText">{{contents.business_amount_out | sizeShift}}</span>
                </li>
                <li>
                    <p class="headTitle">总市值</p>
                    <span class="headText">{{contents.market_value | sizeShift}}</span>
                </li>
                <li>
                    <p class="headTitle">流通市值</p>
                    <span class="headText">{{contents.circulation_value | sizeShift}}</span>
                </li>
            </ul>
        </div>
    </header>
    <section style="padding-bottom: .3rem;background-color: #FFF">
        <div class="allSort">
            <div class="sortMenu clearfix">
                <ul class="sortMenu-ul">
                    <li v-for="(item,index) in choose" :key="item.parameter"
                        @click="chooseAlert(item,index)" :class="{active:index===nowIndex}">
                        <span>{{item.name}}</span>
                    </li>
                </ul>
            </div>
        </div>
        <div id="main" style="width: 100%;height:6.5rem;"></div>
    </section>
</div>
<img id="loading" src="/wap/analysis/images/load.jpg">
<!--留言开始-->
<script th:inline="javascript">
    var baseUrl = [[${baseUrl}]];
</script>
<script src="/common/axios.min.js"></script>
<script src="/common/echarts.min.js"></script>
<script src="/common/jquery-2.1.1.js"></script>
<script src="/wap/stock/index.js"></script>
<script>
    var code = GetQueryString("code");
    var data0;
    var sTime;
    var consult = new Vue({
        el: '#consult',
        data: {
            contents: null,
            reward: false,
            option: null,
            myChart: null,
            choose: [
                {name: '分时', parameter: null},
                {name: '日K', parameter: 6},
                {name: '周K', parameter: 7},
                {name: '月K', parameter: 8},
                {name: '5分', parameter: 2},
                {name: '15分', parameter: 3},
                {name: '30分', parameter: 4},
                {name: '60分', parameter: 5}
            ],
            nowIndex: 0
        },
        methods: {
            /*页面数据获取*/
            getNew: function () {
                var _this = this;
                axios.post(baseUrl + 'api/stock/market/real', {
                    code: code
                }).then(function (response) {
                    console.log(response);
                    _this.contents = response.data.data;
					if(response.data.code===20000){
						load();
					}
                }).catch(function (error) {
                    console.log(error);
                });
            },
            postTtend: function () {
                var _this = this;
                axios.post(baseUrl + 'api/stock/market/trend', {
                    code: code
                }).then(function (response) {
                    console.log(response);
                    _this.division(response.data.data);
                }).catch(function (error) {
                    console.log(error);
                });
            },
            postKline: function (val) {
                var _this = this;
                axios.post(baseUrl + 'api/stock/market/kline', {
                    code: code,
                    candlePeriod: val.parameter,
                    dataCount: 50
                }).then(function (response) {
                    console.log(response);
                    _this.marketKline(response.data.data)
                }).catch(function (error) {
                    console.log(error);
                });
            },
            chooseAlert: function (val, index) {
                var _this = this;
                window.clearInterval(sTime);
                this.myChart.dispose();
                this.nowIndex = index;
                if (index === 0) {
                    this.postTtend();
                    sTime = window.setInterval(function () {
                        _this.postTtend();
                    },300000);
                }
                else {
                    this.postKline(val);
                    sTime = window.setInterval(function () {
                        var i = val;
                        _this.postKline(i);
                    },300000);
                }
            },
            count: function (val) {
                var _this = this;
                var f = []
                for (var i = 0; i < val.length; i++) {
                    var j = (((val[i][0] - _this.contents.preclose_px) / _this.contents.preclose_px) * 100).toFixed(2);
                    f.push(Number(j))
                }
                return f;
            },
            division: function (rawData) {
                this.myChart = echarts.init(document.getElementById('main'));
                var data = splitData(rawData.list);
                var upColor = '#00da3c';
                var downColor = '#ec0000';
                this.option = {
                    backgroundColor: '#fff',
                    padding: 0,
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['现价', '均价']
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        },
                        position: function (pos, params, el, elRect, size) {
                            var obj = {top: 10};
                            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                            return obj;
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    grid: [
                        {
                            left: '5%',
                            right: '5%',
                            height: '60%'
                        },
                        {
                            left: '5%',
                            right: '5%',
                            bottom: '10%',
                            height: '15%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: data.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: data.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {show: false},
                            splitLine: {show: false}
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                            axisLabel: {show: false},
                            axisLine: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false}
                        }
                    ],
                    series: [
                        {
                            name: '现价',
                            type: 'line',
                            data: calculateMA(0, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            },
                            itemStyle: {
                                normal: {
                                    color: '#576ec6'
                                }
                            },
                            areaStyle: {
                                normal: {
                                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: '#6b7ac6'
                                    }, {
                                        offset: 1,
                                        color: '#ffe'
                                    }])
                                }
                            }
                        },
                        {
                            name: '均价',
                            type: 'line',
                            data: calculateMA(1, data),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            },
                            itemStyle: {
                                normal: {
                                    color: '#c6bf1e'
                                }
                            }
                        },
                        {
                            name: '增长比(%)',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: this.count(data.values)
                        }
                    ]
                };
                this.myChart.setOption(this.option);
            },
            marketKline: function (rawData) {
                this.myChart = echarts.init(document.getElementById('main'));
                var upColor = '#ec0000';
                var upBorderColor = '#8A0000';
                var downColor = '#00da3c';
                var downBorderColor = '#008F28';
                data0 = splitData1(rawData.list);
                this.option = {
                    backgroundColor: '#fff',
                    padding: 0,
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross'
                        },
                        backgroundColor: 'rgba(245, 245, 245, 0.8)',
                        borderWidth: 1,
                        borderColor: '#ccc',
                        padding: 10,
                        textStyle: {
                            color: '#000'
                        },
                        position: function (pos, params, el, elRect, size) {
                            var obj = {top: 10};
                            obj[['left', 'right'][+(pos[0] < size.viewSize[0] / 2)]] = 30;
                            return obj;
                        }
                    },
                    axisPointer: {
                        link: {xAxisIndex: 'all'},
                        label: {
                            backgroundColor: '#777'
                        }
                    },
                    legend: {
                        bottom: 10,
                        left: 'center',
                        data: ['日K', 'MA5', 'MA10', 'MA20', 'MA60']
                    },
                    grid: [
                        {
                            left: '5%',
                            right: '5%',
                            height: '60%'
                        },
                        {
                            left: '5%',
                            right: '5%',
                            bottom: '10%',
                            height: '15%'
                        }
                    ],
                    xAxis: [
                        {
                            type: 'category',
                            data: data0.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            splitLine: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        },
                        {
                            type: 'category',
                            gridIndex: 1,
                            data: data0.categoryData,
                            scale: true,
                            boundaryGap: false,
                            axisLine: {onZero: false},
                            axisTick: {show: false},
                            splitLine: {show: false},
                            axisLabel: {show: false},
                            splitNumber: 20,
                            min: 'dataMin',
                            max: 'dataMax'
                        }
                    ],
                    yAxis: [
                        {
                            scale: true,
                            splitArea: {
                                show: true
                            }
                        },
                        {
                            scale: true,
                            gridIndex: 1,
                            splitNumber: 2,
                            axisLabel: {show: false},
                            axisLine: {show: false},
                            axisTick: {show: false},
                            splitLine: {show: false}
                        }
                    ],
                    dataZoom: [
                        {
                            show: true,
                            disabled: false,
                            type: 'inside',
                            start: 0,
                            end: 100
                        },
                        {
                            show: false
                        }
                    ],
                    series: [
                        {
                            name: '日K',
                            type: 'candlestick',
                            data: data0.values,
                            itemStyle: {
                                normal: {
                                    color: upColor,
                                    color0: downColor,
                                    borderColor: upBorderColor,
                                    borderColor0: downBorderColor
                                }
                            },
                            markPoint: {
                                label: {
                                    normal: {
                                        formatter: function (param) {
                                            return param != null ? Math.round(param.value) : '';
                                        }
                                    }
                                },
                                data: [
                                    {
                                        name: 'XX标点'
                                    },
                                    {
                                        name: 'highest value',
                                        type: 'max',
                                        valueDim: 'highest'
                                    },
                                    {
                                        name: 'lowest value',
                                        type: 'min',
                                        valueDim: 'lowest'
                                    },
                                    {
                                        name: 'average value on close',
                                        type: 'average',
                                        valueDim: 'close'
                                    }
                                ],
                                tooltip: {
                                    formatter: function (param) {
                                        console.log(param)
                                        return param.name + '<br>' + (param.data.coord || '');
                                    }
                                }
                            },
                            markLine: {
                                symbol: ['none', 'none'],
                                data: [
                                    [
                                        {
                                            name: 'from lowest to highest',
                                            type: 'min',
                                            valueDim: 'lowest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                normal: {show: false},
                                                emphasis: {show: false}
                                            }
                                        },
                                        {
                                            type: 'max',
                                            valueDim: 'highest',
                                            symbol: 'circle',
                                            symbolSize: 10,
                                            label: {
                                                normal: {show: false},
                                                emphasis: {show: false}
                                            }
                                        }
                                    ],
                                    {
                                        name: 'min line on close',
                                        type: 'min',
                                        valueDim: 'close'
                                    },
                                    {
                                        name: 'max line on close',
                                        type: 'max',
                                        valueDim: 'close'
                                    }
                                ]
                            }
                        },
                        {
                            name: 'MA5',
                            type: 'line',
                            data: calculateMA1(7),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA10',
                            type: 'line',
                            data: calculateMA1(8),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA20',
                            type: 'line',
                            data: calculateMA1(9),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: 'MA60',
                            type: 'line',
                            data: calculateMA1(10),
                            smooth: true,
                            lineStyle: {
                                normal: {opacity: 0.5}
                            }
                        },
                        {
                            name: '成交量',
                            type: 'bar',
                            xAxisIndex: 1,
                            yAxisIndex: 1,
                            data: data0.volumns
                        }
                    ]
                };
                this.myChart.setOption(this.option);
            }
        },
        created: function () {
            var _this = this;
            _this.getNew();
            setTimeout(function () {
                _this.postTtend();
                sTime = window.setInterval(function () {
                    _this.postTtend();
                },300000);
            }, 100)
        },
        filters: {
            data: function (input) {
                var d = new Date(input);
                var year = d.getFullYear();
                var month = d.getMonth() + 1;
                var day = d.getDate() < 10 ? '0' + d.getDate() : '' + d.getDate();
                var hour = d.getHours();
                var minutes = d.getMinutes();
                var seconds = d.getSeconds();
                return month + '-' + day + ' ' + hour + ':' + minutes + ':' + seconds;
            },
            toFixed: function (val) {
                return val.toFixed(2);
            },
            sizeShift: function (val) {
                var d = '';
                var t = 0;
                if (val.toString().length >= 0 && val.toString().length <= 4) {
                    d = '';
                    t = val;
                } else if (val.toString().length > 4 && val.toString().length <= 8) {
                    d = '万';
                    t = val / 10000;
                } else if (val.toString().length > 8 && val.toString().length <= 12) {
                    d = '亿';
                    t = val / 100000000;
                } else if (val.toString().length > 12 && val.toString().length <= 16) {
                    d = '兆';
                    t = val / 1000000000000;
                }
                return t.toFixed(1) + d;
            },
            percent: function (val) {
                return val.toFixed(2) + '%';
            }
        }
    });

    function splitData(val) {
        var rawData = val;
        var categoryData = [];
        var values = [];
        var volumns = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            values.push(rawData[i]);
        }
        return {
            categoryData: categoryData,
            values: values
        };
    }

    function calculateMA(dayCount, data) {
        var result = [];
        for (var i = 0, len = data.values.length; i < len; i++) {
            result.push(data.values[i][dayCount].toFixed(3));
        }
        return result;
    }

    function splitData1(rawData) {
        var categoryData = [];
        var valuese = [];
        var values = [];
        var volumns = [];
        for (var i = 0; i < rawData.length; i++) {
            categoryData.push(rawData[i].splice(0, 1)[0]);
            valuese.push(rawData[i]);
            values.push([rawData[i][0], rawData[i][1], rawData[i][3], rawData[i][2]]);
            volumns.push(rawData[i][4])
        }
        return {
            categoryData: categoryData,
            values: values,
            valuese: valuese,
            volumns: volumns
        };
    }

    function calculateMA1(dayCount) {
        var result = [];
        for (var i = 0, len = data0.valuese.length; i < len; i++) {
            result.push(data0.valuese[i][dayCount]);
        }
        return result;
    }
	function load() {
        $('#loading,#consult').addClass('active')
    }
</script>
</body>
</html>